<template>
  <div>
    <el-container>
      <el-header style="height: 75px">
        <!-- 引入头部组件 -->
        <div></div>

        <homeHead @signOut="signOut"></homeHead>
      </el-header>
      <el-container>
        <!-- 切换 -->
        <el-aside
          :width="isCollapse == true ? '66px' : '250px'"
          style="height: 560px"
        >
          <!-- 点击切换模式 -->
          <p class="head-contra" @click="contra">|||</p>
          <!-- 引入导航栏列表组件 -->
          <homeList :itemx="isCollapse"></homeList>
        </el-aside>
        <el-main>
          <!-- 主要内容区 -->
          <div class="body-box">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import homeHead from "../components/com/home_head.vue"; //引入头部组件
import homeList from "../components/com/home_list.vue"; //引侧边导航部组件

export default {
  // 挂载组件
  components: {
    homeHead,
    homeList,
  },
  data() {
    return {
      isCollapse: false,
    };
  },
  // 守卫
  beforeRouteEnter(to, from, next) {
    let token = sessionStorage.getItem("token");
    // token 不存在则返回登陆
    if (token != null) {
      next();
    }
    //存在放行
    next("/login");
  },
  methods: {
    signOut(rem) {
      //退出登陆

      this.$confirm("此操作将退出当前账户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 清除token
          sessionStorage.clear();
          //跳转路由
          this.$router.push("/");
          // 消息提示
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          // 消息提示
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    contra() {
      //进行切换状态
      // alert("a");

      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #373d41;
  color: #333;
  text-align: center;
  line-height: 75px;
}

.el-aside {
  background-color: #333744;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #eaedf1;
  color: #333;
  text-align: center;
  line-height: 80px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.body-box {
  width: 95%;
  margin: auto;
  background: #fff;
  padding: 2%;
}
.head-contra {
  width: 100%;

  text-align: center;
  margin: 0;
  background: rgb(74, 80, 100);
  color: #fff;
  height: 30px;
  line-height: 30px;
}
</style>